<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ page isELIgnored="false" %>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/font-awesome.min.css">
    <%--    <link rel="stylesheet" href="/static/css/main.css">--%>
    <link rel="stylesheet" type="text/css" href="/static/ztree/zTreeStyle.css">
    <link href="/static/css/pagination01.css" rel="stylesheet" type="text/css">

    <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        body {
            /*margin-right: 500px;*/
            margin-left: -200px;
            margin-top: 30px;
          /*  width: 500px;
            height: 300px;*/
        }
    </style>

</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="/jsp/body/index.jsp">首页</a></li>
                <li><a href="/user/query/for/search">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form id="roleForm" role="form" class="form-inline" action="/assign/role" method="post">
                        <input type="hidden" name="userId" value="${param.userId }"/>
                        <input type="hidden" name="pageNum" value="${param.pageNum }"/>

                        <div class="form-group">
                            <label for="leftSelect">未分配角色列表</label><br>

                            <select id="leftSelect" class="form-control" multiple size="10"
                                    style="width:100px;overflow-y:auto;">
                                <c:forEach var="role" items="${requestScope.unAssignedRoleList}">
                                    <option value="${role.id}">${role.houserole}</option>
                                </c:forEach>
                            </select>


                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="rightBtn" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="leftBtn" class="btn btn-default glyphicon glyphicon-chevron-left"
                                    style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="rightSelect">已分配角色列表</label><br>


                            <select name="roleIdList" id="rightSelect" class="form-control" multiple size="10"
                                    style="width:100px;overflow-y:auto;">
                                <c:forEach var="role" items="${requestScope.assignedRoleList}">
                                    <option value="${role.id}">${role.houserole}</option>
                                </c:forEach>
                            </select>

                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <button id="submitBtn" type="submit" style="width: 200px;"
                                    class="btn btn-success btn-lg btn-block">分配
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>


</div>
</body>
</html>
<script type="text/javascript" src="/static/jquery/jquery-2.1.1.min.js"></script>

<script type="text/javascript" src="/static/layer/layer.js"></script>

<link rel="stylesheet" type="text/css" href="/static/css/pagination01.css"/>

<script type="text/javascript" src="/static/scripts/jquery.pagination.js"></script>
<script type="text/javascript">
    $("#rightBtn").click(function () {
        $("#leftSelect>option:selected").appendTo("#rightSelect")
    })
    $("#leftBtn").click(function () {
        $("#rightSelect>option:selected").appendTo("#leftSelect");
    })
    $("#submitBtn").click(function () {
        $("#rightSelect>option").prop("selected", "selected");
    })
</script>
